<template>
    <div class="comment-main" >
        <div class="comment-list" ref="CommentWapper">
            
            <ul v-if="commentmain.length > 0">
                <li class="list-item" v-for="(item,index) in commentmain" v-bind:key="item">
                <div class="profile">
                    <span class="stars" :class="'stars-'+item.qualityStar"><em></em></span>
                    <span class="userinfo">
                        <span>{{item.userInfo.nickName}}</span>
                        <span class="level " :class="'level-'+item.userInfo.levelName"></span>
                        <span>{{item.publishTime.replace(item.publishTime.substring(10), '')}}</span>
                    </span>
                </div>
                <div class="content">{{item.content}}</div>
                <ul class="images" v-if="item.picVideInfo">
                    <li v-for="(img,index) in item.picVideInfo.imageInfo" v-bind:key="item">
                        <router-link :to="{name:'imgcontent',path:'imgcontent', params:{imgid: img.url}}">
                            <!-- <img :src="'//image4.suning.cn/uimg/ZR/share_order/'+img.url+'_100x100.jpg'"> -->
                            <img :src="img.url">
                        </router-link>
                    </li>
                </ul>
                
                
                <p v-if="item.shopInfo" class="shopname">{{item.shopInfo.shopName}}</p>
                <ul class="standard">
                    <li>{{item.commodityInfo.charaterId1}}:{{item.commodityInfo.charaterDesc1}},{{item.commodityInfo.charaterDesc2}}</li>
                </ul>
            </li>
            </ul>
            <div  class="commit-without" :class="{'commit-show' : commentmain.length==0}">
                     <img src="/static/images/without.png" alt="" > 
                     <p v-show="isReview != '1'">还没有人发表评价</p>
                     <p v-show="isReview == '1'">没有相应的评价哦，看看其他的~</p>
            </div>
        </div>
    </div>
     
</template>

<script>
import { mapGetters } from 'vuex'
import {  getCommentList, UsefulReply } from '@/service/getData'
import { img } from '../../../config/env'
export default {

    data(){
      return {
         foodsScroll:'',
         foodsScrollY:0,
         CommentWapper:'',
         commentmain:[],
         isReview:'',
         top:0
      }
    },
    methods:{
        _initScroll(tabname,rantingnum,cmmdtyCode) {
            // console.log(this.$el);
            var num = 1;
            var _this = this;
            if(!this.top){
              fn1();
            }
            this.commentmain = [];
            var totalnum = rantingnum ;
            var totalcount = Math.ceil(totalnum/9); 
            var num1 = 1; //滚动几次
            var _this = this;
            var on = true;
           _this.$refs.CommentWapper.onscroll = function(){
                if(num1 > totalcount){
                  return;
                }
                this.top = this.scrollTop

                if(this.children[0].offsetHeight - this.top <=  this.offsetHeight + 200 && on){
                     on = false

                     fn1();
                }
           }
             function fn1(){
                    getCommentList({  
                          'cmmdtyCode': _this.$route.params.cmmdtyCode,
                          'tabname': tabname,
                          'num': num,
                          'supplierCode': _this.$route.params.supplierCode,
                          'rand': {
                              _: Math.random()+10000000
                            }
                      })
                     .then((json) => {
                          if(!json.commodityReviews) return;
                          for(let i = 0; i < json.commodityReviews.length; i++ ) {
                             
                                
                                // if( json.commodityReviews[i] ) {
                                //     UsefulReply({
                                //         'commodityReviewId': json.commodityReviews[i].commodityReviewId,
                                //         'rand': {
                                //             _: Math.random()+10000000
                                //         }
                                //     })
                                //     .then((rep) => {
                                //         alert(rep);
                                //     })
                                // }

                            
                                var picVideInfo = json.commodityReviews[i].picVideInfo
                                if(picVideInfo && picVideInfo.imageInfo && picVideInfo.imageInfo.length > 0) {
                                      for(var j=0; j < picVideInfo.imageInfo.length; j++) {
                                            if(picVideInfo.imageInfo[j].url){
                                                let img1 = new Image();
                                                picVideInfo.imageInfo[j].url = img1.src = img()+'/uimg/ZR/share_order/'+picVideInfo.imageInfo[j].url+'_100x100.jpg' 
                                                  
                                                img1.onerror = function(){
                                                    picVideInfo.imageInfo[j].url = '/static/images/pro-default.png'
                                                }

                                            }
                                      } 
                                }
                                 

                              _this.commentmain.push(json.commodityReviews[i]);
                          }
                          num ++
                          num1++
                          on = true
                     })
             }

        },
        _UsefulReply(commodityReviewId){ 
            UsefulReply({
                'commodityReviewId': commodityReviewId,
                'rand': {
                    _: Math.random()+10000000
                }
            })
            .then((rep) => {
                console.log(rep);
            })
        }//回复评论

    },
    created(){
        this.isReview = sessionStorage.isReview
    },
    mounted(){
        // this.$nextTick(() => {
        //     var commentname = this.$route.params.commentname;
        //     console.log(this.vComment[commentname])
            
        // })
    },
    computed:{
        ...mapGetters({
            vComment:"getvComment"
         })
    },
    watch:{
        $route(){
            if(sessionStorage.isReview == '1') {
                this.commentmain = []
            }else {
                this._initScroll(this.$route.params.commentname,this.vComment[this.$route.params.commentname])
            }
        },
        vComment(val, old){      
            if(sessionStorage.isReview == '1'){
                this.commentmain = []
            }else {
                var commentname = this.$route.params.commentname;
                this._initScroll(commentname,this.vComment[commentname])
            }
            
        }

    },
 
    components: {
      
    }
    
}
 
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.commit-without {
    /*display: none;*/
    opacity: 0;
    transition:all 1s;
    width: 70%;
    margin: 5.5rem auto;
    text-align: center;
}
.commit-without.commit-show {
    opacity: 1;
}
.commit-without img {
    
    width: 40%;
    margin-bottom: 0.2rem;
    display: inline-block;
}
.comment-list {
    height: 21.1rem;
    overflow-y:auto 
}
 
 
.comment-list .list-item {
    display: block;
    margin: 0 0 .4rem 0;
    padding: .4rem .56rem;
    background: #FFF;
    overflow: hidden;
}
.comment-list .list-item .profile {
    margin-top: .16rem;
    height: .66rem;
    line-height: .66rem;
}
.comment-list .list-item .profile .stars {
    float: left;
    margin-top: .16rem;
}
 
.stars {
    display: inline-block;
    width: 2.62rem;
    height: .36rem;
    background-image: url();
    background-size: 100% 100%;
    overflow: hidden;
}

.stars em {
    float: left;
    width: 0;
    height: 100%;
    background-image: url();
    background-size: 2.62rem 100%;
    overflow: hidden;
}
.stars.stars-2 em{width:.96rem}.stars.stars-3 em{width:1.52rem}.stars.stars-4 em{width:2.08rem}.stars.stars-5 em{width:2.64rem}
 
.comment-list .list-item .profile .userinfo {
    float: right;
    color: #999;
    font-size: .48rem;
}
.comment-list .list-item .profile .userinfo span {
    vertical-align: middle;
}
.comment-list .list-item .profile .userinfo .level.level-V1 {
    background-image: url('/static/images/V1.png?v=cead6da4');
}
.comment-list .list-item .profile .userinfo .level.level-V2 {
    background-image: url('/static/images/V2.png?v=cead6da4');
}
.comment-list .list-item .profile .userinfo .level.level-V3 {
    background-image: url('/static/images/V3.png?v=cead6da4');
}
.comment-list .list-item .profile .userinfo span {
    vertical-align: middle;
}
.comment-list .list-item .profile .userinfo .level {
    display: inline-block;
    width: .56rem;
    height: .56rem;
    margin: 0 .2rem;
    vertical-align: middle;
    background-size: 100% 100%;
}
.comment-list .list-item .content {
    margin-top: .24rem;
    line-height: .76rem;
    font-size: .52rem;
}
.comment-list .list-item .images {
    overflow: hidden;
}
.comment-list .list-item .shopname {
    margin-top: .4rem;
    line-height: .66rem;
    color: #999;
}
.comment-list .list-item .standard {
    line-height: .66rem;
    font-size: .48rem;
    color: #999;
}
.comment-list .list-item .images li img {
    width: 4rem;
    height: 4rem;
}
.comment-list .list-item .images li {
    float: left;
    margin: .3rem .4rem 0 0;
}
.comment-list .list-item .images {
    overflow: hidden;
}
</style>
